<template>
    <div class="main">
      <div class="head">菜品展示</div>
      <div class="vegeInfo" v-for="(vege,index) in vege" >
        <a href="#" >
          <img :src="getImgsrc(vege.img)"/>
        </a>
<!--        <span>{{vege.date}}</span>-->
        <span>{{vege.name}}</span>
      </div>
    </div>
</template>

<script>
  import api from "../../../../axios/api";

    export default {
        name: "vege",
      data(){
          return {
            vege:[]
          }
      },
      methods:{
        getImgsrc: function (imgsrc) {
          return "../../../../static/images/vege/" + imgsrc;
        },
        setImgAxios: function () {
          //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
          api.setDataFromAxios("/vegeImg", null, "post")
            .then(res => {
              // console.log(res)
              this.vege = res;
              console.log(res)
              // console.log(this.vege.name)
            });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
        }
      },
      created() {
        this.setImgAxios();
      }
    }
</script>

<style scoped lang="stylus">
  .main
    margin-top 20px
    margin-bottom 20px
    width 1000px
    height 925px
    .head
      font-size 30px
      text-align:center
      font-family "华文琥珀"
    .vegeInfo
      margin 20px auto;
      float left
      width 200px
      height 260px
      span
       display block
       text-align center
       color #bbb
       font-family "微软雅黑"



      img
        width 180px
        height 250px
        margin-left 10px


</style>
